<template>
	<view class='page'>
		<view><h3>{{title}}</h3></view>
		<view class="price">{{price}}</view>
		<view class="number">{{number}}</view>
		
		<view class="miaoshu">兼职描述</view>
		
		<view class="content" v-html="content"></view>
		
		<view class="mengceng" v-if="mengceng == 1"></view>
		<view class="liuzi" v-if="liuzi == 1">
			<div class="list"><span>QQ:</span><input type="text"  v-model="QQ" placeholder="请输入您的qq"/></div>
			<div class="list"><span>微信:</span><input type="text" v-model="wechat" placeholder="请输入您的微信"/></div>
			<div class="list"><span>名字:</span><input type="text" v-model="nickname" placeholder="请输入您的名字"/></div>
			<div class="button">
				<button @tap='tijiao()'>确定</button>
				<button @tap='quxiao()'>取消</button>
			</div>
		</view>
		
    
	<view v-if="mushi == 1">
		<button v-if="applyNum != 0" class='submit' @tap='onliuzi()'>报名</button>
		<button v-if="applyNum == 0" class='submit' @tap='onSubmit(urlid)'>报名</button>
		
		<button v-if="phone == ''" class='submit' @tap='login()'>报名</button>
	</view>
	
	<view v-if="mushi == 2">
		<button class='submit' @tap='onliuzi()'>报名</button>
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"",
				price:"",
				number:"",
				content: '',
				urlid:"",
				applyNum:"",
				phone:"",
				
				//留资
				mengceng:0,
				liuzi:0,
				QQ:"",
				wechat:"",
				nickname:"",
				id:"",
				
				//模式
				mushi:''
			}
		},
		onLoad(option) {
			this.phone = uni.getStorageSync('phone')
			this.getcontent(option.id)
			this.newgetcontent(option.id)
			this.id = option.id
			this.wxinfo()
		},
		methods: {
			tijiao(){
				var _this = this
				uni.request({
				    url: this.$url + "inf/user/add",
					data:{
						pId:_this.id,
						phone:_this.phone,
						wechat:_this.wechat,
						qq:_this.QQ,
						nickname:_this.nickname
					},
				    success: (res) => {
						if(res.data.code == 200){
							_this.mengceng = 0
							_this.liuzi = 0
							uni.showToast({
							    title: '提交成功',
								icon:"success",
							    duration: 2000
							});
						}
						
						
				    }
				})
			},
			
			wxinfo:function(){
				uni.request({
				    url: this.$url + "inf/user/getWeChat",
				    success: (res) => {
						this.mushi = res.data.data.type
				    }
				});
			},
			
			quxiao(){
				this.mengceng = 0
				this.liuzi = 0
			},
			onliuzi(){
				this.mengceng = 1
				this.liuzi = 1
			},
			onSubmit(id) {
				uni.request({
				    url: this.$url + "inf/user/postApply",
					data:{
						id:id,
						phone:this.phone
					},
				    success: (res) => {
						
				    }
				})
				uni.navigateTo({
				  url: '../success/success?id=' + id
				})
			},
			login(){
				uni.showModal({
				    content: '请登录后报名',
					// showCancel:false,
					// cancel:false,
					confirmText:'确定',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateTo({
				              url: '../login/login'
				            })
				        }
				    }
				});
				
			},
			getcontent(id){
				uni.request({
				    url: this.$url + "inf/user/getPostById",
					data:{
						id:id,
						phone:this.phone
					},
				    success: (res) => {
						console.log(res.data)
				        if(res.data.code == 200){
							this.title = res.data.data.post_title
							this.price = res.data.data.salary
							this.number = res.data.data.recruitment_num
							this.content = res.data.data.job_description
							this.urlid = id
							// this.applyNum = res.data.data.applyNum
						}
				    }
				})
			},
			
			newgetcontent(id){
				uni.request({
				    url: this.$url + "inf/user/getApplyNum",
					data:{
						phone:this.phone
					},
				    success: (res) => {
				        if(res.data.code == 200){
							this.applyNum = res.data.data.applyNum
						}
				    }
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
  .page {padding: 15px;}
  .submit {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background-color: #00CFE9;
    border-radius: 0;
    color: #fff;
    &:after {display: none}
  }
  .price{
	  color:red;
	  margin-top:10px;
	  margin-bottom:10px;
  }
  .number{
	  margin:10px 0;
  }
  .miaoshu{
	  width: 100%;
	  text-align: center;
	  margin:25px 0;
	  color:#9A9A9A;
	  font-size: 16px;
  }
  .content{
	  width: 100%;
	  overflow: hidden;
  }
  .liuzi{
	  position: fixed;
	  top:30%;
	  left: 8%;
	  background: #fff;
	  width: 300px;
	  z-index: 101;
	  padding:10px 10px;
	  border-radius: 5px;
	  
	  .list{
		  
		  width: 100%;
		  float: left;
		  margin:10px 0;
		  span{
			 width: 50px;
			 float: left;
			 font-size: 16px;
		  }
		  input{
			width: 190px;
			height: 30px;
			float: left;
			font-size: 14px;
			border:1px solid #C0C0C0;
			padding:0 5px;
		  }
	  }
	  
  }
  .mengceng{
	  background: #000;
	  opacity: 0.5;
	  width: 100%;
	  height: 1000px;
	  position: fixed;
	  top:0;
	  left: 0;
	  z-index: 100;
	  
  }
  .button{
	  float: left;
	  width: 100%;
	  margin-top:10px;
	  button{
		  margin-top:10px;
	  }
	  button:nth-child(1){
		  background: #007AFF;
		  color:#fff;
	  }
  }
</style>
